<template>
	<view>
        <view style="padding: 30px; color: red;">需要在登录下才能填报</view>
        <div style="padding-top: 50rpx;"></div>
		<button  class="user_img" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <img class="avatar" :src="avatarUrl"></img>
		</button> 
		<view class="info_con">
			<view class="info_cell">
				<view class="label">昵称：</view> 
				<input class="uni-input" type="nickname" @change="getNickname"  placeholder="请输入昵称" v-model="form.wxNickName"/>
			</view>
			<view class="info_cell">
				<view class="label">手机号码：</view> 
				<input class="uni-input" type="tel"  placeholder="请输入手机号" v-model="form.mobile"/>
			</view>
			<view class="info_cell">
				<view class="label">所属区县：</view> 
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="flex-between select_input">
							<view class="uni-input" v-if="date">{{date}}</view>
							<view class="placeholdTxt" v-else>请选择</view>
							<text class="icon iconfont icon-xiangyoujiantou"></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="info_cell">
				<view class="label">性 别：</view> 
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="flex-between select_input">
							<view class="uni-input" v-if="sex!=''">{{array[sex]}}</view>
							<view class="placeholdTxt" v-else>请选择</view>
							<text class="icon iconfont icon-xiangyoujiantou"></text>
						</view>
					</picker>
				</view>
			</view>
			<view  class="submit_btn" hover-class="btn_haver"  @click="submit">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	// import { validateForm  } from '@/utils/tools.js'
	// import { saveUser , showLoading , hideLoading} from '@/utils/utils.js'
	// import { uploadFile } from '@/utils/uploadFile.js'
	// import { userEdit  } from '@/api/home.js'
	export default {
		data() {
			return {
				baseFIleUrl: this.$fileBase,
                phoneHeight:'' ,
				form:{
					wxNickName:'',
					wxAvatar:'',
					mobile:'',
				},
				date: '',
				array: ['男', '女'],
				sex: '',
				startDate:this.getDate('start'),
				endDate:this.getDate(),
				rules:{
					mobile:[
						{pattern:'phoneReg',msg:'手机号码格式不正确'}
					],
				},
				avatarUrl:''
			}
		},
		onLoad() {
            this.getPhoneHeight() 
			this.form=uni.getStorageSync('WX_YK_USER')
			this.date=this.form.birthday
			this.sex=this.form.sex
			if(this.form.wxAvatar){
				this.avatarUrl =this.$fileBase+this.form.wxAvatar
			}
		},
		methods: {
            //返回
			backFunc(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			},
			getPhoneHeight() { //获取高度
			      let that = this;
			      uni.getSystemInfo({
			        success: function (res) {
			          console.log(res)
			          that.phoneHeight = `margin-top:${res.statusBarHeight}px`;
			        },
			      });
			    },

			getNickname(e){
                  console.log('用户名',e);
				  this.form.wxNickName=e.detail.value
				},	
			onChooseAvatar(val){
                console.log('val',val);
                
				this.avatarUrl=val.detail.avatarUrl
				showLoading()
				uploadFile(this.avatarUrl).then(res=>{
					hideLoading()
					this.form.wxAvatar = res.data.url
				}).catch(()=>{
					hideLoading()
					this.avatarUrl=""
				})
			},
			// 性别选项
			 bindPickerChange: function(e) {
          this.sex = e.detail.value
        },
			// 时间选择
			bindDateChange: function(e) {
        this.date = e.detail.value
      },
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
		
			    if (type === 'start') {
			        year = year - 100;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			submit(){
				let flag = validateForm(this.rules,this.form)
				if(flag){
					showLoading()
					let userId = uni.getStorageSync('WX_YK_USERID')
					let data = {
						...this.form,
						userId,
						sex:this.sex,
						birthday:this.date
					}
					userEdit(data).then(res=>{
						if(res.code==200){
							hideLoading()
							uni.showToast({
								title:'提交成功',
								complete:()=>{
									saveUser(data)
							    uni.navigateBack();
								}
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.nav-box {
	  position: relative;
	  padding-left: 16rpx;
	}
	.backCss{
		height: 76rpx;
		line-height: 76rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		display: flex;
	}
  .user_img{
    width: 150rpx;
    height: 100rpx;
    // border-radius: 50%;
    background-color: rgba(0,0,0,0)
    // border: none !important;

  }
   button::after{
    border: none !important;
  }
  .avatar{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #ccc;
    // margin-right: 20rpx;
  }
  .info_con{
    margin: 80rpx;
  }
  .info_cell{
    display: flex;
    margin: 30rpx 0rpx;
    border-bottom: 1rpx solid #ccc;
    padding-bottom: 20rpx;
  }
  .uni-input{
    margin-left: 30rpx;
  }
//   .uni-input::placeholder{
//      color: #ccc;
//   }
  .placeholdTxt{
    margin-left: 30rpx;
    color: #808080;
  }
  .submit_btn{
    width: 660rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background: radial-gradient( ellipse,#0F67FE  0,#CEE0FF  100%);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		// margin: 0 auto;
		position: fixed;
		bottom: 300rpx;
		left: 45rpx;
  }
  .label{
	width: 200rpx;
	text-align: right;
  }
</style>
